<template>
  <div>
    <el-container
      style="position: absolute; top: 55px; left: 0; bottom: 0; right: 0; "
    >
      <el-aside width="200px">
          <ul class="list-group">
            <li
              :class="albumIndex === index ? 'active' : ''"
              class="d-flex list-group-item list-group-item-action align-items-center justify-content-around"
              v-for="(item, index) in albums"
              :key="index"
              @click="changealbum(index)"
            >
              <span class="d-flex">{{ item.name }}</span>
              <el-dropdown>
                <span class="el-dropdown-link border p-2">
                  {{ item.num }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    @click.stop.native="openAlbumModel({ item, index })"
                  >
                    修改
                  </el-dropdown-item>
                  <el-dropdown-item @click.stop.native="delAlbums(index)">
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
        </el-aside>
      <el-container>
        <el-header class="d-flex align-items-center">
        <div class="header-left d-flex mr-auto">
          <el-select
            v-model="value"
            placeholder="请选择"
            size="mini"
            style="width: 120px;"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input
            v-model="input"
            placeholder="请输入内容"
            size="mini"
            class="mx-2 w-input"
          ></el-input>
          <el-button type="success" size="mini">搜索</el-button>
        </div>
        <el-row>
          <el-button type="warning" size="mini">
            取消选中
          </el-button>
          <el-button type="danger" size="mini">
            批量删除
          </el-button>
          <el-button type="success" size="mini">
            创建相册
          </el-button>
          <el-button type="warning" size="mini">
            上传图片
          </el-button>
        </el-row>
      </el-header>
          <el-main
            style="
              position: absolute;
              top: 55px;
              left: 200px;
              right: 0;
              bottom: 60px;
            "
          >
            <!-- 主内容 -->
            <el-row :gutter="10">
              <el-col
                :span="24"
                :lg="4"
                :md="6"
                :sm="8"
                v-for="(item, index) in imgList"
                :key="index"
              >
                <el-card
                  class="box-card mb-3"
                  style="cursor: pointer; position: relative;"
                  :body-style="{ padding: '0px' }"
                  shadow="hover"
                >
                  <div
                    class="border"
                    :class="{ 'border-danger': item.ischeck }"
                  >
                    <span
                      class="badge badge-danger"
                      v-if="item.ischeck"
                      style="position: absolute; right: 0; top: 0;"
                    >
                      {{ item.checkOrder }}
                    </span>
                    <img
                      class="w-100"
                      style="height: 100px;"
                      :src="item.url"
                      @click="choose(item)"
                    />
                    <div
                      class="w-100 text-white"
                      style="
                        background-color: rgba(0, 0, 0, 0.5);
                        position: absolute;
                        margin-top: -25px;
                      "
                    >
                      <span class="small">{{ item.name }}</span>
                    </div>
                    <div class="p-2">
                      <el-button-group>
                        <el-button
                          icon="el-icon-view"
                          size="mini"
                          class="p-2"
                          @click="previewImage(item)"
                        ></el-button>
                        <el-button
                          icon="el-icon-edit"
                          size="mini"
                          class="p-2"
                          @click="imageEdit(item, index)"
                        ></el-button>
                        <el-button
                          icon="el-icon-delete"
                          size="mini"
                          class="p-2"
                          @click="imageDel({ item: item, index: index })"
                        ></el-button>
                      </el-button-group>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-main>
          <el-footer
            class="d-flex align-items-center justify-content-center"
            style="position: absolute; bottom: 0; left: 200px; width:1136px"
          >
            <div class="left mr-3">
              <el-pagination
                small
                layout="prev, pager, next"
                :total="50"
              ></el-pagination>
            </div>
            <div class="right" >
              <el-pagination
                
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 40, 60, 80]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
              ></el-pagination>
            </div>
          </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
      ],
      value: '',
      input: '',
      albums: [],
      albumIndex: 0,
      albumVisible: false,
      albumEditIndex: -1,
      albumForm: {
        name: '',
        order: 0,
      },
      imgList: [],
      chooseList: [],
      previewModel: false,
      previewUrl: '',
      uploadVisible: false,
      currentPage: 1,
    }
  },
  created() {
    this.__init()
  },
  methods: {
    __init() {
      for (let i = 0; i < 20; i++) {
        this.albums.push({
          name: '相册' + i,
          num: Math.floor(Math.random() * 100),
          order: 0,
        })
      }
      for (var i = 0; i < 30; i++) {
        this.imgList.push({
          id: i,
          url:
            'https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/40.jpg',
          name: '图片' + i,
          ischeck: false,
          checkOrder: 0,
        })
      }
    },
    changealbum(index) {
      this.albumIndex = index
    },
    //左侧删除
    delAlbums(index) {
      this.$confirm('此操作将永久删除该相册, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.albums.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    //打开对话框
    openAlbumModel(obj) {
      if (obj) {
        let { item, index } = obj
        //初始化表单
        this.albumForm.name = item.name
        this.albumForm.order = item.order
        this.albumEditIndex = index
        return (this.albumVisible = true)
      }
      this.albumForm = {
        name: '',
        order: 0,
      }
      this.albumEditIndex = -1
      this.albumVisible = true
    },
  },
}
</script>

<style scoped="scoped">
.el-header,
.el-footer {
  background-color: #eee;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 40px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

.w-input {
  width: 200px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #333;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.active {
  background-color: rgba(0, 128, 128, 0.1);
  color: #008080;
  border: none;
}

.el-input-number {
  float: left;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}
</style>
